<template>
	<view class="order-details">
		<NavBar title="订单详情"/>
		<view class="content">
			<!-- 订单状态 -->
			<view class="order-status">
				{{ status }}
			</view>
			<!-- 提货地址 -->
			<view class="th-address" v-if="orderInfo.shipments == 2">
				<view class="th-name"> {{orderInfo.shop.name}} {{orderInfo.shop.help_mobile}} </view>
				<view class="th-nav">
					<image src="/static/icon/order/location.png" class="t-img"/>
					<view class="nav-info" @tap="openLoaction">
						<view class="text"> {{orderInfo.shop.region+orderInfo.shop.detail_address}}</view>
						<image src="/static/icon/shop/nav.png" class="n-img"/>
					</view>
				</view>
				<view class="th-yysj"> 提货时间：{{orderInfo.shop.open_time+'-'+orderInfo.shop.over_time}} | 营业时间正常提货 </view>
			</view>
			<!-- 收货地址 -->
			<view class="address-info" v-else>
				<image src="/static/icon/order/location.png" class="a-img"/>
				<view class="address-phone">
					<view class="phone"> {{orderInfo.addressee_name}} {{orderInfo.addressee_telphone}} </view>
					<view class="address"> {{orderInfo.address}} </view>
				</view>
			</view>
			<!-- 预约提货时间 -->
			<view class="th-time" v-if="orderInfo.shipments == 2">
				<view class="label"> 预约提货时间 </view>
				<view class="value"> {{orderInfo.pick_time}} </view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-info" v-for="item in orderInfo.item" :key="item">
				<GoodsItem :goodsInfo="item"/>
				<view class="order-intro">
					<view class="label"> 备注 </view>
					<view class="value"> {{item.note?item.note:'暂无备注'}} </view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="order-item">
					<view class="label"> 订单编号 </view>
					<view class="value"> 
						{{orderInfo.order_sn}} 
						<image src="/static/icon/order/copy.png" @tap="copy(orderInfo.order_sn)" class="v-img"/>
					</view>
				</view>
				<view class="order-item">
					<view class="label"> 下单时间 </view>
					<view class="value"> {{orderInfo.create_time}} </view>
				</view>
				<view class="order-item">
					<view class="label"> 支付方式 </view>
					<view class="value"> {{payType}} </view>
				</view>
				<view class="order-item">
					<view class="label"> {{orderInfo.shipments==1?'预约送货时间':'预约提货时间'}} </view>
					<view class="value"> {{orderInfo.pick_time}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 接单时间 </view>
					<view class="value"> {{orderInfo.accept_time?orderInfo.accept_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 到店时间 </view>
					<view class="value"> {{orderInfo.take_time?orderInfo.take_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 取货时间 </view>
					<view class="value"> {{orderInfo.shop_time?orderInfo.shop_time:'暂无'}} </view>
				</view>
				<view class="order-item" v-if="orderInfo.shipments==1">
					<view class="label"> 收货时间 </view>
					<view class="value"> {{orderInfo.sent_time?orderInfo.sent_time:'暂无'}} </view>
				</view>
			</view>
			<!-- 金额 -->
			<view class="price-info">
				<view class="price-item">
					<view class="label"> 商品金额 </view>
					<view class="price-value"> ￥{{orderInfo.total_amount}} </view>
				</view>
				<view class="price-item">
					<view class="label"> 配送方式 </view>
					<view class="value"> {{orderInfo.shipments==1?'同城配送':'到店自提'}} </view>
				</view>
				<view class="price-item" v-if="orderInfo.shipments==1">
					<view class="label"> 配送费 </view>
					<view class="price-value"> ￥{{orderInfo.delivery_money}} </view>
				</view>
				<view class="price-item">
					<view class="label"> 实付金额 </view>
					<view class="price-value"> ￥{{orderInfo.pay_amount}} </view>
				</view>
				<view class="price-item">
					<view class="label"> 订单状态 </view>
					<view class="value"> {{status}} </view>
				</view>
				<view class="order-intro">
					<view class="label"> 备注 </view>
					<view class="value"> {{orderInfo.note}} </view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="btn-box">
				<view class="btn" @tap="applyRefund(orderInfo.id,orderInfo.pay_amount)" v-if="orderInfo.status == 1&&orderInfo.rider_status == 0"> 申请退款 </view>
				<view class="btn" @tap="delOrderBefore" v-if="orderInfo.status != 0"> 删除订单 </view>
				<view class="btn" @tap="goEvaShop(orderInfo.id,orderInfo.shop_id)" v-if="orderInfo.is_shop_comment == 0 && (orderInfo.status == 5||orderInfo.status == 6)"> 店铺评价 </view>
				<view class="btn" @tap="goEvaGoods(orderInfo.id,orderInfo.item,orderInfo.shipments)" v-if="orderInfo.status == 5"> 商品评价 </view>
				<view class="btn a-btn" @tap="confirm" v-if="orderInfo.status == 4"> 确认收货 </view>
				<view class="btn a-btn" @tap="confirmTH" v-if="orderInfo.status==1&&orderInfo.shipments==2"> 确认提货 </view>
			</view>
		</view>
		<Modal :tips="tips" ref="modalRef" @confirm="confirmFunc"/>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import GoodsItem from '@/components/OneGoodsItem.vue';
	import Modal from '@/components/Modal.vue';
	import { GetOrderDetailsApi, ConfirmOrderApi, DelOrderApi, CancelOrderApi, ConfirmOrderTHApi } from '@/service/index.js'
	const modalRef = ref()
	const tips = ref('')
	const dialogType = ref() // 0 删除 1 确认收货 2 提货
	const confirmText = ref((''))
	const orderInfo = ref({
		order_sn:'', // 订单编号
		create_time: '', 
		note: '', 
		delivery_money: '', // 配送费
		residue_pay: '', // 剩余支付时间
		order_trade_id: '', // 调用立即购买接口需要的字段
		pay_type: '', // 支付方式
		total_amount: '', // 订单金额
		pay_amount: '', // 实付金额
		address: '',
		addressee_name: '',
		addressee_telphone: '',
		shipments: '',
		status_msg: '',
		status: '',
		shop: {
			name: '',
			type: '',
			help_mobile: '',
			detail_address: '',
			region: '',
			open_time: '',
			over_time: '',
			longitude: '',
			latitude: ''
		},
		item: [
			{
				goods_name: '',
				num: '',
				spece_value_id: '',
				spece_content: '',
				thumb: '',
				thumb_url: '',
				price: ''
			}
		]
	})
	const status = computed(() => {
		let text = ''
		if(orderInfo.value.status == -1) {
			text = '已取消'
		} else if(orderInfo.value.status == 0) {
			text = '待付款'
		} else if(orderInfo.value.status == 1) {
			if(orderInfo.value.shipments == 1) {
				text = '待接单'
			} else {
				text = '待提货'
			}
		} else if(orderInfo.value.status == 3) {
			text = '配送中'
		} else if(orderInfo.value.status == 4) {
			if(orderInfo.value.shipments == 1) {
				text = '配送中'
			}
		} else if(orderInfo.value.status == 5) {
			text = '待评价'
		} else if(orderInfo.value.status == 6) {
			text = '已完成'
		} else if(orderInfo.value.status == 7) {
			text = '退款中'
		} else if(orderInfo.value.status == 8) {
			text = '已退款'
		}
		return text
	})
	const payType = computed(() => {
		let name = ''
		switch(orderInfo.value.pay_type) {
			case 'wechat':
				name = '微信支付'
				break;
			case 'deposit':
				name = '测试余额支付'
				break;
			case 'alipay':
				name = '支付宝支付'
				break;
		}
		return name
	})
	const copy = (info) => {
	  uni.setClipboardData({
	  	data: info,
	  	success:() => {
	  		getApp().globalData.toast('复制成功')
	  	}
	  });
	}
	// 导航去商家
	const openLoaction = () => {
		uni.openLocation({
			name: orderInfo.value.shop.name,
			address: orderInfo.value.shop.detail_address,
			latitude: Number(orderInfo.value.shop.latitude),
			longitude: Number(orderInfo.value.shop.longitude)
		})
	}
	// 申请退款
	const applyRefund = (id, price) => {
		uni.navigateTo({
			url: `/pages/applyRefund/applyRefund?order_id=${id}&order_price=${price}`
		})
	}
	// 评价店铺
	const goEvaShop = (id, shop_id) => {
		uni.navigateTo({
			url: `/pages/orderManage/evaShop?order_id=${id}&shop_id=${shop_id}&index=${props.index}`
		})
	}
	// 评价商品
	const goEvaGoods = (id, goods, shipments) => {
		uni.navigateTo({
			url: `/pages/orderManage/evaGoods?order_id=${id}&goods=${JSON.stringify(goods)}&shipments=${shipments}`
		})
	}
	// 支付
	const pay = () => {
		const { total_amount, order_trade_id, pay_type } = orderInfo.value
		uni.navigateTo({
			url: `/pages/checkstand/checkstand?total_amount=${total_amount}&trade_sn=${order_trade_id}&pay_type=${pay_type}`
		})
	}
	// 取消订单
	const cancelOrder = (order_id) => {
		CancelOrderApi({order_id}).then(res => {
			uni.navigateBack()
		})
	}
	// 删除订单
	const delOrderBefore = () => {
		confirmText.value = '确认'
		tips.value = '你确定要删除该订单吗？'
		dialogType.value = 0
		modalRef.value.open()
	}
	// 确认收货
	const confirm = () => {
		confirmText.value = '确认收货'
		tips.value = '您的产品是否已经收到货物？'
		dialogType.value = 1
		modalRef.value.open()
	}
	// 确认提货
	const confirmTH = () => {
		confirmText.value = '确认提货'
		tips.value = '您的产品是否已经收到货物？'
		dialogType.value = 2
		modalRef.value.open()
	}
	const confirmFunc = () => {
		// 0 删除订单 1 确认收货 2 确认提货
		if(dialogType.value == 0) {
			DelOrderApi({order_id: orderInfo.value.id}).then(res => {
				modalRef.value.close()
				uni.navigateBack()
			})
		} else if(dialogType.value == 1) {
			ConfirmOrderApi({order_id: orderInfo.value.id}).then(res => {
				getOrderInfo()
				modalRef.value.close()
			})
		} else if(dialogType.value == 2) {
			ConfirmOrderTHApi({order_id: orderInfo.value.id}).then(res => {
				getOrderInfo()
				modalRef.value.close()
			})
		}
	}
	const confirmDialog = () => {
		console.log('confirmDialog');
		confirmDialogRef.value.close()
	}
	const orderId = ref()
	const getOrderInfo = () => {
		GetOrderDetailsApi({order_id: orderId.value}).then(res => {
			res.item.forEach(child => {
				child.spece_content = child.spece_value_id
				child.thumb_url = child.thumb
			})
			orderInfo.value = res
		})
	}
	onLoad((e) => {
		orderId.value = e.orderId
	})
	onShow(() => {
		getOrderInfo()
	})
</script>

<style lang="scss" scoped>
	.order-details {
		padding-bottom: 40px;
		.content {
			padding: 10px 12px;
		}
		.order-status {
			font-weight: 500;
			font-size: 18px;
			color: #3D3D3D;
			line-height: 22px;
			margin-bottom: 12px;
		}
		.address-info, .th-address, .th-time, .goods-info, .order-info, .price-info {
			margin-bottom: 10px;
			border-radius: 10px;
			background-color: #fff;
			padding: 20px 10px 10px;
			.label {
				color: #666666;
				font-size: 14px;
				font-weight: 400;
			}
			.value {
				color: #333333;
				font-size: 14px;
				font-weight: 400;
			}
			.price-value {
				color: #FF3B1E;
				font-size: 14px;
				font-weight: 400;
			}
		}
		.address-info {
			padding-right: 35px ;
			display: flex;
			.a-img {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}
			.address-phone {
				flex: 1;
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				.address {
					line-height: 21px;
				}
			}
		}
		.th-address {
			.th-name {
				font-weight: 500;
				font-size: 16px;
				color: #333333;
				line-height: 17px;
			}
			.th-nav {
				margin: 12px 0 10px;
				display: flex;
				.t-img {
					width: 20px;
					height: 20px;
					margin-right: 6px;
				}
				.nav-info {
					flex: 1;
					display: flex;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 17px;
					.text {
						flex: 1;
					}
					.n-img {
						width: 12px;
						height: 16px;
						margin-left: 8px;
					}
				}
			}
				.th-yysj {
					width: 260px;
					height: 22px;
					font-weight: 400;
					font-size: 12px;
					color: #FC6A01;
					padding: 0 5px;
					line-height: 22px;
					background: #FFF8ED;
					box-sizing: border-box;
				}
		}
		.th-time {
			padding: 15px 15px 15px 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.label {
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
			}
			.value {
				font-weight: 400;
				font-size: 14px;
				color: #0EC76E;
				line-height: 20px;
			}
		}
		.goods-info { }
		.order-info, .price-info {
			.order-item, .price-item {
				display: flex;
				justify-content: space-between;
				line-height: 19px;
				margin-bottom: 10px;
				&:nth-last-of-type(1) {
					margin-bottom: 0;
				}
				.value {
					color: #333333;
					.v-img {
						width: 16px;
						height: 16px;
					}
				}
				.price-value {
					color: #FF3B1E;
				}
			}
			.order-intro {
				.value {
					margin-top: 8px;
					color: #333333;
					line-height: 20px;
				}
			}
		}
		.btn-box {
			height: 50px;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			padding: 0 12px;
			align-items: center;
			justify-content: end;
			background-color: #fff;
			.btn {
				width: 80px;
				height: 32px;
				color: #333333;
				font-size: 14px !important;
				margin-left: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border-radius: 151px;
				border: 1px solid #999999;
				box-sizing: border-box;
			}
			.a-btn {
				border: none;
				color: #FFFFFF;
				background: #FF3B1E;
				// border-radius: 151px;
			}
		}
	}
</style>
